<?php
		echo $this->Html->css(array(
			'ui.jqgrid','redmond/jquery-ui-1.10.3.custom.min.css', /*jquery-ui-icons jqgrid依赖jqueryui的部分图标*/
		));
?>
<?php

        echo $this->Html->script(array(
            'jquery/jquery-ui-1.10.3.custom.min.js',
			'jquery/jquery.jgrowl.min.js',
			'jqgrid/i18n/grid.locale-cn',
        	'jqgrid/jquery.jqGrid.min.js',
			'i18n/language-zh-cn',
        ));
?>

<style>
::-webkit-scrollbar {   width:8px;height:8px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 16px #645654; /*rgba(60,60,60,0.5)*/}
::-webkit-input-placeholder { /* WebKit browsers */   color:    #aaa;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:    #aaa;}
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:    #aaa;}
:-ms-input-placeholder { /* Internet Explorer 10+ */  color:    #aaa;}

label{cursor: pointer;}
.btn-primary{font-size:20px;color:#FFF;}
h3,h4.ui-state-default{line-height: 1.6em;}
td{padding:5px !important;}
.ui-widget-content {
    background-color: transparent;
    border: 0 none;
}
.ui-state-default{border: 0 none;}
.ui-jqgrid .ui-jqgrid-view{font-size:12px;}
.jqgfirstrow{display: none;}
.ui-jqgrid .ui-jqgrid-hbox{overflow: hidden;}
.ui-grid-actions li {
    cursor: pointer;float: left;  display: inline;  list-style: none outside none;   margin: 0px;   position: relative;
}
ul.ui-grid-actions {
    margin: 0 0;
    padding: 0 0;
    list-style-type: none;
}
.ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr {
	border: 1px solid #DDD;font-weight: normal;    width: auto !important;
}
.ui-jqgrid .ui-jqgrid-htable th div {overflow: auto;height: auto;word-wrap: break-word;	white-space: normal;}
.ui-jqgrid tr.jqgrow td{white-space: normal;height:auto;}
.ui-jqgrid .fa{cursor:pointer;}
.text-content{max-height:150px;overflow-y:auto;}
.ui-jqgrid tr.ui-row-ltr td,.ui-jqgrid tr.jqgrow td{     border-right-color: #ddd;border-bottom-color: #ddd; }
.ui-state-hover, .ui-widget-content .ui-state-hover{background: #d0e5f5;}
.col-sm-12{position:static;}
#gbox_list4{background:#FFF;}
.affix {
	position: fixed;top:0px;
	z-index: 10000;
}
</style>
		<div class="ui-portlet">
			<ol class="breadcrumb">
			  <li><a href="/users/index"><i class="fa fa-home"></i>&nbsp;&nbsp;个人中心</a></li>
			  <li><a href="/questionnaires/mine">我的数据表单</a></li>
			  <li class="active">查看表单数据</li>
			</ol> 
		</div>          
       <hr>

	<button id="table-full-width" class="pull-right btn btn-primary  btn-sm" style="font-size:18px;border:0 none;"><i class="fa fa-arrows-h"></i> 全屏 </button>

	<a href="/questionnaires/export_datas/{{$Questionnaire['id']}}" class="pull-right btn btn-primary  btn-sm" style="font-size:18px;border:0 none;margin-right:10px;"> 导出Excel </a>


<div class="tab-content">
		<div role="tabpanel" class="tab-pane active" id="chi-info">
			<h2>{{$Questionnaire['name']}}</h2>
			<hr>
		</div>
	</div>
	
	<div class="alert alert-warning">提示：
		<p style="text-indent:2em">增加了几种状态的数据处理，可以当成其他的含义来处理数据。如已成交未成交、已联系未联系等。</p>
		<p style="text-indent:2em">点击编辑按钮可设置备注，编辑后需要刷新页面，列表中的备注与状态才会变化。</p>
	</div>
	
	<div class="clearfix">{{$page_navi}}</div>
<section style="margin:10px auto;">
<table id="list4" ></table>
</section>
<div class="clearfix">{{$page_navi}}</div>

<script>

$(function(){
	
	$(document).on('click','.fa-star-o',function(){
		var that = this;
		var id = $(this).parents('tr:first').attr('id');
		ajaxAction('/questionnaires/setfield/{{$qid}}/'+id+'/star/1',null,null,function(request){
			showSuccessMessage(request.msg);
			$(that).removeClass('fa-star-o').addClass('fa-star');
		});
	});
	$(document).on('click','.fa-star',function(){
		var that = this;
		var id = $(this).parents('tr:first').attr('id');
		ajaxAction('/questionnaires/setfield/{{$qid}}/'+id+'/star/0',null,null,function(request){
			showSuccessMessage(request.msg);
			$(that).removeClass('fa-star').addClass('fa-star-o');
		});
	});
	$(document).on('click','.fa-circle',function(){
		var that = this;
		var id = $(this).parents('tr:first').attr('id');
		ajaxAction('/questionnaires/setfield/{{$qid}}/'+id+'/readed/0',null,null,function(request){
			showSuccessMessage(request.msg);
			$(that).removeClass('fa-circle').addClass('fa-circle-o');
		});
	});
	$(document).on('click','.fa-circle-o',function(){
		var that = this;
		var id = $(this).parents('tr:first').attr('id');
		ajaxAction('/questionnaires/setfield/{{$qid}}/'+id+'/readed/1',null,null,function(request){
			showSuccessMessage(request.msg);
			$(that).removeClass('fa-circle-o').addClass('fa-circle');
		});
	});
	

	$(window).resize(function(){
		console.log('resize');
		jQuery("#list4").jqGrid( 'setGridWidth',$('#maincontent').width()-60 ); // window
		
		return;
	}).trigger('resize');
	
	$('#table-full-width').click(function(){
		if($(this).attr('full')) {
			//$('#gbox_list4').css({'position':'static','left':10});
			$('#maincontent').css('width','1170px');
			$('.container').removeAttr('style');
			jQuery("#list4").jqGrid( 'setGridWidth',$('#maincontent').width()-60 );
			$(this).removeAttr('full');
		}
		else{
			$('#maincontent').css('width','100%');$('.container').css('width','100%');
			//$('#gbox_list4').css({'position':'absolute','left':10});
			jQuery("#list4").jqGrid( 'setGridWidth',$(window).width()-60 );
			$(this).attr('full',true);
		}
	});
	
})

jQuery("#list4").jqGrid({
	datatype: "local",
	width:1100,
	height: 'auto',
   	colNames:[
   		{{loop $headers $k $name}}
   		'{{$name}}',
   		{{/loop}}
   		'操作'
   	],
   	colModel:[
   		{{loop $headers $k $name}}
   		{name:'{{$k}}',align:"center",index:'{{$k}}'},
   		{{/loop}}
   		{name:'actions',index:'actions', sortable:false}
   		/*
   		{{if in_array($k,array('star','readed','status'))}},width:80{{/if}}
   		
   		{name:'invdate',index:'invdate', width:90, sorttype:"date"},
   		{name:'name',index:'name', width:100},
   		{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
   		{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},		
   		{name:'total',index:'total', width:80,align:"right",sorttype:"float"},		
   		{name:'note',index:'note', width:150, sortable:false}	*/	
   	],
   	multiselect: false,
   	caption: false
});
var mydata = <?php echo json_encode($datas) ?>;
for(var i=0;i<mydata.length;i++){
	
	jQuery("#list4").jqGrid('addRowData', mydata[i].id , mydata[i]);
}

$('.ui-jqgrid-htable').affix({
    offset: {
        top: 400
    }
});

</script>